1 files changed, 67 insertions, 0 deletions
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 03c9af50..ba02679c 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -49,6 +49,7 @@
 	let importCategory = '';
 	let importReplies = false;
 	let badger: Partial<User>;
+	let migrateMode = false;
 
 	// $: downloadDisabled = badgeCount > 20;
 
@@ -376,6 +377,21 @@
 			importMode = false;
 			importImages = undefined;
 		});
+
+	const migrateCategory = () => {
+		badgesPromise = fetch(
+			`/api/badges?migrate=true&original=${encodeURIComponent(
+				(document.querySelector('#migrate_original') as HTMLInputElement).value
+			)}&new=${encodeURIComponent(
+				(document.querySelector('#migrate_new') as HTMLInputElement).value
+			)}`,
+			{
+				method: 'PUT'
+			}
+		);
+
+		migrateMode = false;
+	};
 </script>
 
 <HeadTitle route={`${data.username}'s Badge Wall`} path={`/user/${data.username}`} />
@@ -490,6 +506,16 @@
 													? $locale().user.badges.importMode.disable
 													: $locale().user.badges.importMode.enable}
 											</button>
+											<span style="margin: 0 0.625rem;">•</span>
+											<button
+												on:click={() => {
+													if (migrateMode) selectedBadge = undefined;
+
+													migrateMode = !migrateMode;
+												}}
+											>
+												Migrate Category
+											</button>
 
 											{#if editMode && isOwner}
 												{@const groups = groupedBadges
@@ -767,6 +793,47 @@
 	</Popup>
 {/if}
 
+<Popup fullscreen onLeave={() => (migrateMode = false)} show={migrateMode}>
+	Migrate Category
+
+	<p />
+
+	<input
+		type="text"
+		placeholder="Original Category"
+		id="migrate_original"
+		minlength="1"
+		maxlength="1000"
+		size="20"
+	/>
+	<input
+		type="text"
+		placeholder="New Category"
+		id="migrate_new"
+		minlength="1"
+		maxlength="1000"
+		size="20"
+	/>
+	<SettingHint lineBreak>
+		Leave original category empty to migrate all uncategorised badges.
+	</SettingHint>
+
+	<p />
+
+	<button
+		on:click={() => {
+			importMode = false;
+			importImages = undefined;
+		}}
+		class="button-lined"
+	>
+		{$locale().user.badges.importMode.cancel}
+	</button>
+	<button on:click={() => migrateCategory()} class="button-lined" style="float: right;">
+		Migrate
+	</button>
+</Popup>
+
 <style>
 	/* body {
 		margin: 0;